<template>
	<uni-segmented-control :current="current" :values="items" :style-type="styleType"
		activeColor="#333333" @clickItem="onChangeTab" />
</template>

<script>
	import Constants from '@/constants';
	//订单类型Tab组件，封装所有订单类型
	//@group 业务组件
	export default {
		//
		name: 'orderHead',
		//
		mixins: [Constants],
		//
		data() {
			return {
				//
				orderCategoryExt: [],
				//分段器
				items: [],
				current: 0,
				styleType: 'text'
			};
		},
		//
		props: {
			//订单类型
			flowState: {
				type: String,
				default: '全部',
				required: true
			}
		},
		//
		mounted() {
			this.initOrderTab();
		},
		//
		methods: {
			//初始化订单类型
			initOrderTab() {
				//
				this.orderCategoryExt = [];
				this.orderCategoryExt = [{
					id: 1,
					name: '全部',
					value: 'all'
				}, ...this.OrderCategory];
				//
				const index = this.orderCategoryExt.findIndex(item => item.name == this.flowState);
				this.current = index > -1 ? index : 0;
				//
				this.items = this.orderCategoryExt.map(item => item.name);
			},
			//切换订单类型
			onChangeTab(e) {
				const newIndex = e.currentIndex;
				if (this.current !== newIndex) {
					this.current = newIndex;
					const flowState = this.orderCategoryExt[newIndex].name;
					//点击订单类型后回调
					//@arg 向父组件传递类型名称（flowState）
					this.$emit('onChangeTab:result', flowState);
				}
			},
		}
	};
</script>

<style lang="scss" scoped></style>